<template>
  <el-button :plain="plain" :class="{'mobile-table-btn':mobileTable}" style="height:32px;padding: 0 15px;margin-left:0;" size="small" type="primary">
    <div class="center">
      <span v-if="text.length < 10" class="text">{{ text }}</span>
      <ToolTip v-else :content="text" class="btn"/>
      <i v-if="!mobileTable" class="el-icon-plus" style="font-size: 16px;"/>
    </div>
  </el-button>
</template>

<script>
export default {
  props: {
    plain: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '新建'
    },
    mobileTable: {// 列表移动端适配
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
  .mobile-table-btn {
    height: 36px !important;
    border-radius: 4px;
    flex: 1;
    .text {
      font-size: 16px;
    }
    .center {
      justify-content: center;
    }
  }
  .center {
    display: flex;
    align-items: center;
  }
  .text {
    font-size:14px;
    margin-right:5px;
  }
  .btn {
    max-width: 160px;
  }
</style>
